<template>
  <view class="day-recommend" @click.stop="toDayRecomSongList" :style="{ height: store.imageW + 'px' }">
    <text class="text">{{ day[0] }}</text>
    <text class="text">{{ day[1] }}</text>
    <svg t="1677915968543" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
      p-id="13856" width="148" height="148">
      <path d="M523.9 511.98m-419.5 0a419.5 419.5 0 1 0 839 0 419.5 419.5 0 1 0-839 0Z" fill="#FFD629" p-id="13857">
      </path>
      <path
        d="M885.2 298.58c-1.6-0.6 37.1 68.4 49.5 128.9 46.4 227-99.9 448.6-326.9 495.1-37.9 7.8-75.7 10.1-112.5 7.7-63.2-4.2-123.6-22.8-177.3-53 0 0 348.9-269.7 567.2-578.7z"
        fill="#FF9A2C" opacity=".1" p-id="13858"></path>
      <path
        d="M922.4 383.38c73.9 216.8-52.8 456-264 525.8-36.7 12.1-108.5 28.3-184.9 19.4 0-0.5 166.62-15.7 313.54-190.74C942.88 552.16 920.2 376.98 922.4 383.38z"
        fill="#FF9A2C" opacity=".2" p-id="13859"></path>
      <path
        d="M790 184.48c-40.9-34.6-93.6-59.3-155.8-77.3-95.5-27.6-199.4-17.7-300.6 31.5-139.3 67.7-240.1 245.9-227.6 400.2 4.2 52 10.1 101.8 30 145.5 0.5 1 1.6 1.5 2.7 1.2 21.1-6.8 218.8-73.6 375.8-190.3 213.3-158.5 292.3-296.6 275.5-310.8z"
        fill="#FCE99A" opacity=".24" p-id="13860"></path>
      <path
        d="M188.008782 408.574552a136 234.3 54.429 1 0 381.157036-272.589938 136 234.3 54.429 1 0-381.157036 272.589938Z"
        fill="#F9F2D7" opacity=".2" p-id="13861"></path>
      <path d="M616.9 326.38m-52.7 0a52.7 52.7 0 1 0 105.4 0 52.7 52.7 0 1 0-105.4 0Z" fill="rgb(241, 18, 56)"
        p-id="13862"></path>
      <path
        d="M381.7 438.38l-77.6 125.3-15.5-8c-16-8.2-22.3-27.9-14.1-43.9l26.2-47.3-45.6-19.6c-15.7-8.1-21.9-27.4-13.8-43.1l8.2-16 132.2 52.6z"
        fill="rgb(241, 18, 56)" p-id="13863"></path>
      <path
        d="M603 479.68c27.4 56.5 14.1 119.5-29.7 140.8s-101.6-7.2-129-63.7l30.6-8c37.4-9.7 72.1-26.6 102.9-50l25.2-19.1z"
        fill="rgb(241, 18, 56)" p-id="13864"></path>
      <path
        d="M514.5 567.38l8.8 6c3.6 2.5 8.3 2.8 12.2 0.7l26.9-14c3.4-1.8 5.7-5.1 6.3-8.9l1.5-10.5c1.4-10-9.4-17.1-18-11.9-9.1 5.5-20.9 11.8-35.4 17.7-8.8 3.6-10.1 15.5-2.3 20.9z"
        fill="#E53600" opacity=".68" p-id="13865"></path>
      <path
        d="M922.4 383.38c73.9 216.8-52.8 456-264 525.8-36.7 12.1-108.5 28.3-184.9 19.4 0-0.5 122.92-45.83 275.21-216.29C910.21 531.51 920.2 376.98 922.4 383.38z"
        fill="#FF9A2C" opacity=".19" p-id="13866"></path>
      <path
        d="M922.4 383.38c73.9 216.8-52.8 456-264 525.8-36.7 12.1-108.5 28.3-184.9 19.4 0-0.5 89.92-84.69 242.21-255.15C877.21 492.65 920.2 376.98 922.4 383.38z"
        fill="#FF9A2C" opacity=".15" p-id="13867"></path>
    </svg>
  </view>
</template>
<script setup>
import { reactive, onBeforeMount, nextTick } from 'vue';
import { useStore } from '../../store/main'
import { getRecommendSongs } from '@/apis/mine'

const store = useStore()

const day = reactive([])

onBeforeMount(() => {
  const date = new Date()
  const d = date.getDate()
  if (d < 10) {
    day.push(...[0, d])
  } else {
    const strd = d + ''
    day.push(...strd)
  }
})
function toDayRecomSongList() {
  getRecommendSongs().then(res => {
    const { dailySongs, recommendReasons } = res.data
    const lists = dailySongs.map((song, index) => {
      const { name, id, al, ar } = song
      return {
        name,
        id,
        url: al.picUrl,
        author: ar.map(t => t.name).join('、'),
        recomRes: recommendReasons[index] ? recommendReasons[index].reason : ''
      }
    })
    store.setSongs({
      sheetId: '0',
      coverImgUrl: lists[0].url,
      description: store.langObj.recomDesc,
      name: store.langObj.dayrecom,
      lists,
      more: false
    })
    nextTick(() => store.setCurrentBar('songlist'))
  })
}

</script>
<style lang="scss">
.day-recommend {
  width: 100%;
  display: flex;
  align-items: center;
  background-color: var(--bg);
  border-radius: $border-radius;
  justify-content: space-evenly;
  background-image: linear-gradient(45deg, $white-color, rgb(255, 154, 44), $bottom-bar-active-color);

  .text {
    text-align: center;
    color: $white-color;
    font-weight: bold;
    font-size: calc(3 * $page-frame-scroll-text-size);
    animation: textLight .8s ease-in-out infinite alternate both;
  }

  @keyframes textLight {
    0% {
      text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    100% {
      text-shadow: 0 0 18px $bottom-bar-active-color-opcaty;
    }
  }
}
</style>